<template>
	<view class="user-info">
		<view class="user-top">
			<view class="portrait" @click="goAccount">
				<image src="../static/logo.png" mode=""></image>
			</view>
			<view class="user">
				<view class="name" @click="goAccount">用户微信昵称</view>
				<view class="name-bottom">
					<text class="member">高级会员</text>
					<text class="grade">等级: Lv6</text>
				</view>
			</view>
		</view>
		<view v-if="showMiddle" class="user-middle">
			<view class="vip-box" @click="goMemberClub">
				<text>会员俱乐部</text>
				<view class="iconfont icon-VIP"></view>
			</view>
			<view class="integral-box">
				<view class="iconfont icon-daibanshixiang"></view>
				<text>每天签到赚积分</text>
			</view>
		</view>
		<view class="user-bottom">
			<view class="item">
				<text class="num">￥999999</text>
				<view class="name">
					<view class="iconfont icon-qianbao"></view>
					<text class="name">钱包</text>
				</view>
			</view>
			<view class="item">
				<text class="num">999个</text>
				<view class="name">
					<view class="iconfont icon-red-packet_icon"></view>
					<text class="name">红包</text>
				</view>
			</view>
			<view class="item">
				<text class="num">9454154187</text>
				<view class="name">
					<view class="iconfont icon-integral"></view>
					<text class="name">积分</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showMiddle: {
				default: true
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goMemberClub() {
				uni.navigateTo({
					url: "/pages/member-club/member-club"
				})
			},
			goAccount() {
				uni.navigateTo({
					url: "/pages/account/account"
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-info {
		width: 100%;
		background-color: #fff;
		padding-bottom: rpx(20);
		.user-top {
			display: flex;
			align-items: center;
			padding: rpx(22) rpx(31) rpx(18) rpx(31);
			.portrait {
				width: rpx(80);
				height: rpx(80);
				border-radius: rpx(40);
				overflow: hidden;
				& > image {
					width: 100%;
					height: 100%;
				}
			}
			.user {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: rpx(16);
				height: rpx(80);
				.name {
					font-size: rpx(20);
				}
				.name-bottom {
					text {
						display: inline-block;
						width: rpx(90);
						height: rpx(25);
						line-height: rpx(25);
						border-radius: rpx(15);
						font-size: rpx(13);
						border: 1px solid #007AFF;
						text-align: center;
					}
					.member {
						border-color: #e5620c;
						color: #e5620c;
					}
					.grade {
						border-color: #4bdac3;
						color: #4bdac3;
						margin-left: rpx(16);
					}
				}
			}
		}
		.user-middle {
			padding: 0 rpx($uni-margin-left);
			display: flex;
			justify-content: space-between;
			.vip-box {
				flex: 1;
				margin-right: rpx(10);
				background-color: #4bdac3;
				border-radius: rpx(4);
				color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 rpx(17);
				box-sizing: border-box;
				text {
					font-size: rpx(20);
					letter-spacing: rpx(4);
				}
				view {
					font-size: rpx(70);
				}
			}
			.integral-box {
				width: rpx(126);
				height: rpx(80);
				background-color: #fd5e5e;
				border-radius: rpx(4);
				color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				view {
					font-size: rpx(36);
				}
				text {
					font-size: rpx(12);
					letter-spacing: rpx(2);
					margin-top: rpx(2);
				}
			}
		}
		.user-bottom {
			display: flex;
			justify-content: space-around;
			margin-top: rpx(18);
			.item {
				width: 33.3%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.num {
					font-size: rpx(18);
					margin-bottom: rpx(12);
					width: 100%;
					overflow: hidden;
					text-align: center;
					text-overflow: ellipsis;
				}
				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #aaaaaa;
					view {
						font-size: rpx(16);
					}
					text {
						font-size: rpx(16);
						margin-left: rpx(7);
					}
				}
			}
		}
	}
</style>
